<div id="ecard_frame">
	<canvas id="c" width="640" height="320">
		Sorry, your web browser does not support Canvas content.
	</canvas>
</div>
<div class="center">
	<input type="button" value="Personalize" name="btn_personalize" id="inline-btn" >
</div>

<input type="range" id="img-width" value="0" min="0" max="640"> Image Width<br/>
<input type="range" id="img-angle" value="0" min="-90" max="90" > Image angle<br/>
<input type="range" id="img-padding" value="0" min="0" max="640"> Image Padding<br/>
<input type="range" id="img-offset-x" value="0" min="0" max="320" > Image Offset X<br/>
<input type="range" id="img-offset-y" value="0" min="0" max="320" > Image Offset Y<br/>
<input type="checkbox" id="img-repeat" checked="checked">

<script>
var base_url = "<?php echo base_url();?>";
var canvas_width = 640;
var canvas_height = 320;

var canvas = new fabric.Canvas('c');
var padding = 0;

fabric.Image.fromURL(base_url + 'content/images/blue.png', function(img) {

  img.scaleToWidth(100).set({
    originX: 'left',
    originY: 'top'
  });

  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(img);

  var pattern = new fabric.Pattern({
    source: function() {
      patternSourceCanvas.setDimensions({
        width: img.getWidth() + padding,
        height: img.getHeight() + padding
      });
      return patternSourceCanvas.getElement();
    },
    repeat: 'repeat'
  });

  canvas.add(new fabric.Polygon([
    {x: 185, y: 0},
    {x: 250, y: 100},
    {x: 385, y: 170},
    {x: 0, y: 245} ], {
      left: 220,
      top: 200,
      angle: -30,
      fill: pattern
    }));

  document.getElementById('img-width').onchange = function() {
    img.scaleToWidth(parseInt(this.value, 10));
    canvas.renderAll();
  };
  document.getElementById('img-angle').onchange = function() {
    img.setAngle(this.value);
    canvas.renderAll();
  };
  document.getElementById('img-padding').onchange = function() {
    padding = parseInt(this.value, 10);
    canvas.renderAll();
  };
  document.getElementById('img-offset-x').onchange = function() {
    pattern.offsetX = parseInt(this.value, 10);
    canvas.renderAll();
  };
  document.getElementById('img-offset-y').onchange = function() {
    pattern.offsetY = parseInt(this.value, 10);
    canvas.renderAll();
  };
  document.getElementById('img-repeat').onclick = function() {
    pattern.repeat = this.checked ? 'repeat' : 'no-repeat';
    canvas.renderAll();
  };
});
</script>